import { ChangeDetectionStrategy, Component } from '@angular/core';

interface HourMinSecond {
  hour: number;
  min: number;
  second: number;
}
@Component({
  selector: 'app-double',
  templateUrl: './double.component.html',
  styles: [
    `
      .container {
        display: flex;
        align-items: center;
      }
      .container .slider {
        width: 8rem;
        margin-right: 0.3rem;
      }
      .container lv-time-picker {
        width: 1.8rem;
      }
      .container .separator {
        margin-left: 0.08rem;
        margin-right: 0.08rem;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DoubleComponent {
  points: { value: number; label: string }[] = [];
  startTimeValue: Date = new Date();
  endTimeValue: Date = new Date(this.startTimeValue.getTime() + 60 * 60 * 1000);
  sliderValue: number[] = [];
  wholeDaySecond = 86400;

  ngOnInit() {
    this.timeChange();

    this.points = [
      {
        value: this.calculatePoint(0),
        label: '00:00',
      },
      {
        value: this.calculatePoint(1),
        label: '06:00',
      },
      {
        value: this.calculatePoint(2),
        label: '12:00',
      },
      {
        value: this.calculatePoint(3),
        label: '18:00',
      },
      {
        value: this.calculatePoint(4),
        label: '23:59',
      },
    ];
  }

  calculatePoint(index: number): number {
    if (index === 4) {
      return 3600 * 6 * index - 1;
    }
    return 3600 * 6 * index;
  }

  onSliderEnd = event => {
    console.log('slideEnd', event);
  };

  // slider值改变时触发事件
  onChange = () => {
    this.startTimeValue = this.valueToDateTime(this.sliderValue[0]); //转换成时间组件能显示的时间格式
    this.endTimeValue = this.valueToDateTime(this.sliderValue[1]);
  };

  //value转化成时分字符串显示
  valueToTimeStr(value: number): string {
    if (value === this.wholeDaySecond) {
      value--;
    }
    const time: HourMinSecond = this.getHourMinSecond(value);
    return `${this.formatTime(time.hour)}:${this.formatTime(time.min)}`;
  }

  formatTime(time: number): string {
    if (time < 10) {
      return `0${time}`;
    } else {
      return String(time);
    }
  }

  getHourMinSecond(value: number): HourMinSecond {
    const hour = Math.floor(value / 3600);
    const min = Math.floor((value % 3600) / 60);
    const second = Math.floor(value % 60);
    return { hour, min, second };
  }

  valueToDateTime(value: number): Date {
    if (value === this.wholeDaySecond) {
      value--;
    }
    const date = new Date();
    const time = this.getHourMinSecond(value);
    date.setHours(time.hour);
    date.setMinutes(time.min);
    date.setSeconds(time.second);
    return date;
  }

  // 时分秒改变
  timeChange(): void {
    if (this.startTimeValue && this.endTimeValue) {
      this.sliderValue = [this.timeToValue(this.startTimeValue), this.timeToValue(this.endTimeValue)];
    }
  }

  timeToValue(value: Date): number {
    return value.getHours() * 3600 + value.getMinutes() * 60 + value.getSeconds();
  }

  openChange() {
    if (this.startTimeValue > this.endTimeValue) {
      [this.startTimeValue, this.endTimeValue] = [this.endTimeValue, this.startTimeValue];
    }
  }
}
